<template>
  <div id="page-club">
    <h2>俱乐部/赛事方详细信息</h2>

    <Card>
      <Form
        ref="form"
        :model="form.data"
        :rules="ruleValidate"
        :label-width="120"
        class="club-info-form mt20">
        <Row>
          <Col span="11">
            <FormItem prop="logoPath" label="Logo" style="height: 140px; overflow:hidden">
              <img :src="form.data.logoPath | absImg" style="max-width: 50%"/>
            </FormItem>
            <FormItem prop="rclubName" label="全称">
              {{ form.data.rclubName }}
            </FormItem>
            <FormItem label="所在区域">
              <Row>
                <Col span="8">
                  <Select v-model="form.data.province" placeholder="请选择省份" disabled>
                    <Option v-for="(item, index) in areaCodeList" :value="item.code" :key="item.code">{{item.name}}</Option>
                  </Select>
                </Col>
                <Col span="7" offset="1">
                  <Select v-model="form.data.city" placeholder="请选择城市" disabled>
                    <Option v-for="(item, index) in cityList" :value="item.code" :key="item.code">{{item.name}}</Option>
                  </Select>
                </Col>
                <Col span="7" offset="1" placeholder="请选择区县">
                  <Select v-model="form.data.county" disabled>
                    <Option v-for="(item, index) in countyList" :value="item.code" :key="item.code">{{item.name}}</Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
            <FormItem prop="chagePerson" label="负责人姓名">
              {{ form.data.chagePerson }}
            </FormItem>
            <FormItem prop="qqNo" label="负责人QQ">
              {{ form.data.qqNo }}
            </FormItem>
            <FormItem prop="wechatNo" label="负责人微信">
              {{ form.data.wechatNo }}
            </FormItem>
            <FormItem prop="qqGroup" label="QQ群">
              {{ form.data.qqGroup }}
            </FormItem>
          </Col>
          <Col span="11" offset="2">
            <FormItem prop="qrCodePath" label="微信公众号" style="height: 140px; overflow:hidden">
              <img :src="form.data.qrCodePath | absImg" style="max-width: 50%"/>
            </FormItem>
            <FormItem prop="rclubShortName" label="简称">
              {{ form.data.rclubShortName }}
            </FormItem>
            <FormItem prop="address" label="地址">
              {{ form.data.address }}
            </FormItem>
            <FormItem prop="phone" label="办公电话">
              {{ form.data.phone }}
            </FormItem>
            <FormItem prop="mobile" label="负责人手机号">
              {{ form.data.mobile }}
            </FormItem>
            <FormItem prop="email" label="邮件">
              {{ form.data.email }}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem prop="introduce" label="简介">
              {{ form.data.introduce }}
            </FormItem>
            <FormItem>
              <Button type="primary" @click="goUpdate()">编辑</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>

    <Card class="mt20 clearfix">
      <Form class="club-info-form mt20">
        <Row>
          <Col span="24">
            <FormItem label="微信端二维码">
              <qrcode :info="qrcode.info" :size="100" v-if="qrcode.show"></qrcode>
            </FormItem>
            <FormItem label="微信端地址">
              <a :href="qrcode.info" target="_blank">{{ qrcode.info }}</a>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { h5Url } from '@/config'
  import uploadImg from '@/components/upload-img'
  import qrcode from '@/components/qrcode'
  import codeApi from '@/api/code'
  import clubApi from '@/api/club'

  export default {
    name: 'page-club',
    components: {
      uploadImg,
      qrcode
    },
    data () {
      return {
        isSubmiting: false,
        cityList: [],
        countyList: [],
        ruleValidate: {
          rclubName: [
            { required: true, message: '请输入俱乐部名称', trigger: 'change' }
          ]
        },
        query: {
          pkRclubInfo: null
        },
        form: {
          data: {}
        },
        qrcode: {
          show: false,
          info: ''
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        areaCodeList: 'areaCodeList'
      })
    },
    watch: {
      'form.data.province': 'getCity',
      'form.data.city': 'getCounty'
    },
    methods: {
      goUpdate () {
        this.$router.push({path: '/club/update'})
      },
      async detail () {
        this.query.pkRclubInfo = this.userInfo.pkRclubInfo
        const { body } = await clubApi.detail(this.query)
        const { responseData } = body
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.form.data = responseData
          this.qrcode.info = `${h5Url}/#/club/${responseData.pkRclubInfo}/activity/list`
          this.qrcode.show = true
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async getCity () {
        let parentid = this.form.data.province
        const { body } = await codeApi.list({
          codeType: 'area',
          parentid: String(parentid)
        })
        this.cityList = body.responseData.map((item) => {
          let area = Object.assign({}, item)
          area.code = String(area.code)
          return area
        })
      },
      async getCounty () {
        let parentid = this.form.data.city
        const { body } = await codeApi.list({
          codeType: 'area',
          parentid: String(parentid)
        })
        this.countyList = body.responseData.map((item) => {
          let area = Object.assign({}, item)
          area.code = String(area.code)
          return area
        })
      }
    },
    async mounted () {
      this.$store.dispatch('getUserInfo')
      await this.$store.dispatch('getCode', 'area')
      this.detail()
    }
  }
</script>

<style lang="less">
  .club-info-form {
    width: 80%;
    margin: 0px auto;
    margin-top: 20px;
  }
</style>

